<template>
  <div>
    <el-dialog
      :title="info.openType == 'edit' ? '修改分类' : '添加分类'"
      :visible.sync="info.dialogVisible"
      width="70%"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item prop="first_cateid" label="一级分类">
              <el-select v-model="ruleForm.first_cateid" @change="firstChange">
                <el-option label="请选择" :value="0"></el-option>
                <el-option
                  v-for="(item, index) in fristCateList"
                  :key="index"
                  :label="item.catename"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="second_cateid" label="二级分类">
              <el-select v-model="ruleForm.pid">
                <el-option
                  v-for="(item, index) in secondCateList"
                  :key="index"
                  :label="item.catename"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="info.openType === 'edit'"
                type="primary"
                class="btn1"
                @click="submitForm"
                >立即修改</el-button
              >
              <el-button v-else type="warning" class="btn1" @click="submitForm"
                >立即添加</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="详细描述" name="second">
          <div id="div1" ref="div1"></div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { getCateListFn, getSecondCateListFn } from "../../request";
// 引入编辑器
import E from "wangeditor";
export default {
  props: ["info"],
  data() {
    return {
      activeName: "first",
      // 对话框是否显示
      dialogVisible: false,
      // 属性值的数组
      fristCateList: [],
      secondCateList: [],
      ruleForm: {
        first_cateid: 0,
        second_cateid: 0,
        goodsname: "",
        price: 0,
        market_price: 0,
        img: "",
        description: "",
        sepcsid: 0,
        sepcsattr: [],
        isnew: 0,
        ishot: 0,
        status: 1,
      },
      // 编辑器
      myEditor: null
    };
  },
  created() {
    // 进入页面，先获取所有的一级分类
    this.getFristCateList();
  },
  methods: {
    // 切换tabs
    handleClick(tab) {
      if (tab.name === "second" && !this.myEditor) {
        // 富文本编辑器可以看做是一个比较复杂的输入框，需要设置以及获取这个输入框的值
        // 点击第二个标签，初始化编辑器
        this.myEditor = new E("#div1");
        this.myEditor.create();
        // txt.html()设置内容的方法
        this.myEditor.txt.html(this.ruleForm.description);
      }
    },
    // 获取一级分类的下拉数据
    async getFristCateList() {
      this.fristCateList = await getCateListFn();
    },
    // 监听一级分类的变化
    async firstChange() {
      this.secondCateList = await getSecondCateListFn(
        this.ruleForm.first_cateid
      );
    },
    // 设置弹窗中的值
    setStatus(data) {
      this.ruleForm = data;
    },
    // 提交表单
    submitForm() {
      // this.$refs.ruleForm  选择表单，目的是为了校验表单
      // validate  element自带的方法，用来校验
      this.$refs.ruleForm.validate(async (valid) => {
        // valid为真时表示校验通过
        if (valid) {
          // txt.html() 获取富文本编辑器中的内容
          this.ruleForm.description = this.myEditor.txt.html();
          var res;
          if (this.info.openType === "edit") {
            // edit,是修改
            res = await cateEditFn(this.ruleFrom);
          } else {
            // add，是新增
            res = await cateAddFn(this.ruleFrom);
          }
          if (res === "操作成功") {
            // 关闭弹窗
            this.$emit("close");
          }
        } else {
          // 校验不通过
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
#div1 {
  width: 100%;
  height: 100%;
}
</style>